<template>
    <div>
        <header-nav></header-nav>
        <div class="goodsList">
            <div class="slide">
                <p @click="setPriceFilter('all')">全部</p>
                <p @click="setPriceFilter(0)">0-100</p>
                <p @click="setPriceFilter(1)">101-500</p>
                <p @click="setPriceFilter(2)">501-1000</p>
                <p @click="setPriceFilter(3)">1001-3000</p>
            </div>
            <div class="listBox">
                <button type="button" @click="sortGoods">升降序</button>
                <div class="listWrap">
                    <div class="listItem" href="" v-for="(item, index) in goodsList" :key="index">
                        <a class="listItem__pic"><img src="../assets/img/default-img.jpeg" alt=""></a>
                        <div class="listItem__info">
                            <p class="listItem__info__p price">{{item.productName}}</p>
                            <p class="listItem__info__p">￥{{item.salePrice}}</p>
                        </div>
                        <button type="button" class="listItem__btn" @click="addCart(item.productId)">加入购物车</button>
                    </div>
                </div>
                <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="100">
                    <img src="../assets/img/loading-spinning-bubbles.svg" alt="" v-if="loading">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios';
    import HeaderNav from '../components/Header';
    export default {
        components: { HeaderNav },
        data () {
            return {
                goodsList: [],
                page: 1,
                pageSize: 8,
                sortFlag: true,
                busy: true,
                loadTip: '加载中...',
                loading: false,
                priceLeve: 'all'
            }
        },
        mounted() {
            this.getGoodsList();
        },
        methods: {
            getGoodsList(loadFlag) {
                let params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    sort: this.sortFlag ? 1 : -1,
                    priceLeve: this.priceLeve
                };
                this.loading = true;
                axios.get('/goods', {
                    params: params
                }).then((res) => {
                    var data = res.data;
                    this.loading = false;
                    if (data.status == 0) {
                        if (loadFlag) {
                            this.goodsList = this.goodsList.concat(data.result && data.result.list);
                            this.busy = data.result.count == 0;
                            this.loadTip = data.result.count == 0 ? '没有了' : '加载中...';
                        } else {
                            this.goodsList = data.result.list;
                            this.busy = false;
                        }
                    } else {
                        this.goodsList = [];
                    }
                });
            },
            sortGoods() {
                this.sortFlag = !this.sortFlag;
                this.page = 1;
                this.getGoodsList();
            },
            setPriceFilter(priceLeve) {
                this.page = 1;
                this.priceLeve = priceLeve;
                this.getGoodsList();
            },
            addCart(productId) {
                axios.post('/goods/addCart', {
                    productId: productId
                }).then(res => {
                    if (res.data.status == 0) {
                        alert('添加成功！');
                    } else {
                        alert('添加失败！');
                    }
                });
            },
            loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this.page++;
                    this.getGoodsList(true);
                }, 1000);
            }
        }
    }
</script>

<style scoped>
.goodsList {
    display: flex;
}
.slide {
    flex-shrink: 0;
    width: 20%;
}
.listBox {
    flex-shrink: 0;
    width: 80%;
    border: 1px solid #ccc;
    padding: 20px;
    margin-right: -2%;
    box-sizing: border-box;
}
.listWrap {
    width: 100%;
}
.listWrap::after {
    display: block;
    content: '';
    clear: both;
}
.listItem {
    float: left;
    width: 18%;
    padding: 10px;
    margin-right: 2%;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.listItem__pic {
    display: block;
    width: 100%;
    height: 240px;
    overflow: hidden;
}
.listItem__pic img {
    width: 100%;
    height: 100%;
}
.listItem__info__p {
    text-align: left;
}
.listItem__info__p.price {
    color: rgb(243, 22, 22);
}
.listItem__btn {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid rgb(243, 22, 22);
}
</style>

